<template>
    <div class="location-container">
        <span class="location-body-title">车辆定位管理</span>
        <!-- <img src="../../assets/autos/1.png"> -->
        <div class="location-body">
            <div class="location-body-left">
                <div class="location-body-left-header">
                    <el-input v-model="inputValue" clearable placeholder="搜索位置" id='tipinput' style="width: 80%;"
                        prefix-icon="el-icon-search" class="location-left-body-header-select-item ">
                    </el-input>
                </div>
                <div class="location-body-left-footer">
                    <div class="location-body-left-table-container">
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="autoId" label="车辆编号" align="center">
                            </el-table-column>
                            <el-table-column prop="autoStatus" label="车辆状态" align="center">
                            </el-table-column>
                            <el-table-column prop="autoLocation" label="所在地区" align="center">
                            </el-table-column>
                        </el-table>
                    </div>

                </div>
            </div>
            <div class="location-body-right">
                <div class="map-container">
                    <div id="container"></div>
                </div>

            </div>
        </div>

    </div>
</template>

<script >
import AMapLoader from '@amap/amap-jsapi-loader'
import { getAutoStatusInfo } from '@/api/archives'

export default {
    name: "LocationManage",
    props: ["iptId"],
    data() {
        return {
            map: null,
            auto: null,
            placeSearch: null,
            mapMoudle: null,

            inputValue: null,
            tableData: [],
            mapData: [
                {
                    name: '车辆1',
                    longitude: 117.201808,
                    latitude: 31.772891,
                    driver: '甲0',
                    tel: '10000000000',
                    img: 'https://ts1.cn.mm.bing.net/th/id/R-C.37601cb6849424539d7d64906299d088?rik=W1VzedbuGhqQMg&riu=http%3a%2f%2f00.minipic.eastday.com%2f20180509%2f20180509161611_f84f35ca9fddb1e4241fb74ac165cfe7_4.jpeg&ehk=mLxZO5YzatpJv%2bMGNchMJrol1w2Hzu8Tq8xE3QNGj20%3d&risl=&pid=ImgRaw&r=0'
                },
                {
                    name: '车辆2',
                    longitude: 117.202543,
                    latitude: 31.770757,
                    driver: '甲1',
                    tel: '10000000001',
                    img: "https://ts1.cn.mm.bing.net/th/id/R-C.ba222e51041d92e1bcf49549bee66708?rik=WYM5xE6NhnMt3w&riu=http%3a%2f%2fi2.dd-img.com%2fupload%2f2019%2f1223%2f1577109791300.jpg&ehk=iRbwGtgLnbQ5WAdaa6Aqa2F9gOvO0uC%2fZN0yhL%2fPjiY%3d&risl=&pid=ImgRaw&r=0"
                },
                {
                    name: '车辆3',
                    longitude: 117.205106,
                    latitude: 31.770941,
                    driver: '甲2',
                    tel: '10000000002',
                    img: "https://ts1.cn.mm.bing.net/th/id/R-C.6b510e640947707e93e6b268e764c17c?rik=BDrb2GLodyWiPA&riu=http%3a%2f%2f00.minipic.eastday.com%2f20180509%2f20180509161611_f84f35ca9fddb1e4241fb74ac165cfe7_6.jpeg&ehk=YUsUcIB9WhPvIajrV4DB2Td9LlCjJqCBHqfqO71UKYE%3d&risl=&pid=ImgRaw&r=0"
                },
                {
                    name: '车辆4',
                    longitude: 117.204943,
                    latitude: 31.773835,
                    driver: '甲3',
                    tel: '10000000003',
                    img: "https://ts1.cn.mm.bing.net/th/id/R-C.a7b62ef1b0d3adf360a6d96e1567acfd?rik=7i2aaBvhOYtC8A&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f57%2f8057.jpg&ehk=FZcQNWZq0Tw7d%2fKFwz%2fKde5RIu0HJcd%2fL8cKETPaUaM%3d&risl=&pid=ImgRaw&r=0"
                },
                {
                    name: '车辆11',
                    longitude: 117.204089,
                    latitude: 31.77271,
                    driver: '甲4',
                    tel: '10000000004',
                    img: "https://ts1.cn.mm.bing.net/th/id/R-C.123d0e165bfa2c704c4417d3214076a7?rik=xajcHg0tCWrmHA&riu=http%3a%2f%2fs3.xchuxing.com%2fxchuxing%2fforum%2f202002%2f12%2f161153ni3uz20eaxtpgzt7.jpg&ehk=4luMfIlvDvkrvUVeMC5%2fCKzgq11ACxshb4zqAjGLycc%3d&risl=&pid=ImgRaw&r=0"
                },
                {
                    name: '车辆12',
                    longitude: 117.201719,
                    latitude: 31.773674,
                    driver: '甲11',
                    tel: '10000000005',
                    img: "https://tse3-mm.cn.bing.net/th/id/OIP-C.TXUDYGw9YEW8Ti9kOqyI5AHaEo?rs=1&pid=ImgDetMain"
                }
            ],

        }
    },
    created() {

    },
    computed: {
        filtedTableData() {
            if (!this.form.name && !this.form.type) {
                return this.getPageList(this.tableData, this.tablePage.pageNum, this.tablePage.pageSize)
            } else {
                return this.getPageList(this.tableData.filter((value) => {
                    const nameMatch = !this.form.name || value.proName.includes(this.form.name);
                    const typeMatch = !this.form.type || value.conTimeOfSigning.includes(this.form.type);
                    return nameMatch && typeMatch;
                }), this.tablePage.pageNum, this.tablePage.pageSize)
            }
        }
    },
    methods: {
        initTableData() {
            getAutoStatusInfo().then(res => {
                this.tableData = res.data.data
            })
        },

        initMap() {
            const _this = this
            // 高德地图key的密钥
            window._AMapSecurityConfig = {
                securityJsCode: '1ce114cc1bb1420ffea1f155d9f04e02' // 密钥 
            }
            AMapLoader.load({
                key: "898d45dfec0db721fa3569c7c63faf1f",              // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: [],           // 需要使用的的插件列表，'AMap.ToolBar', "AMap.Scale", "AMap.AutoComplete" ,'AMap.PlaceSearch'

            }).then((AMap) => {
                _this.mapMoudle = AMap;

                const map = new AMap.Map('container', {
                    viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
                    zoom: 11, //初始化地图层级
                    center: [117.205186, 31.771685],//初始化地图中心点
                    resizeEnable: true

                })

                AMap.plugin(
                    [
                        'AMap.ElasticMarker',
                        'AMap.Scale',
                        'AMap.ToolBar',
                        'AMap.HawkEye',
                        'AMap.MapType',
                        'AMap.Geolocation',
                        'AMap.AutoComplete',
                        'AMap.PlaceSearch'
                    ],
                    () => {
                        map.addControl(new AMap.ElasticMarker())
                        map.addControl(new AMap.Scale())
                        map.addControl(new AMap.ToolBar())
                        map.addControl(new AMap.HawkEye())
                        map.addControl(new AMap.MapType())
                        map.addControl(new AMap.Geolocation())
                    }
                )
                _this.map = map
                _this.markPoints()
                _this.latitude()
                // 搜索功能
                _this.toSearch()
                //_this.draw()


            }).catch(e => {
                console.log(e);
            })
        },
        toSearch() {
            const _this = this
            // 实例化AutoComplete
            const autoOptions = {
                // input 为绑定输入提示功能的input的DOM ID,注意这个id要个搜索输入框的id一致
                input: 'tipinput'
            }
            const autoComplete = new _this.mapMoudle.AutoComplete(autoOptions)
            autoComplete.on('select', _this.select)// 注册监听，当选中某条记录时会触发
        },
        select(e) {
            const _this = this
            // 无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search
            // { map: _this.map } ==> 这个对象是能配置的 --> 根据官方文档配置即可，需要什么配置什么
            const placeSearch = new _this.mapMoudle.PlaceSearch({
                map: _this.map
            })
            placeSearch.setCity(e.poi.adcode)
            placeSearch.search(e.poi.name) // 关键字查询查询
        },
        markPoints() {
            const _this = this
            _this.mapData.forEach(item => {
                // 创建一个 Marker 实例：
                const marker = new window.AMap.Marker({
                    position: new window.AMap.LngLat(item.longitude, item.latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[lng, lat]
                });
                // 将创建的点标记添加到已有的地图实例：
                _this.map.add(marker);

                //给标记点添加事件
                marker.on('click', (e) => {
                    _this.setInfoWindows(e, item)
                })
            });
        },
        //显示的弹出框组件
        setInfoWindows(e, item) {
            //const _this = this
            // 信息窗体的内容

            let content = [
                // e.pos[0],e.pos[1],
                `<div style='padding:0px 0px  4px;'><b>${item.name}</b>`,
                `驾驶员：${item.driver}`,
                `电话 : ${item.tel}`,
                `<img src=${item.img} alt="" style="width: 160px;height: 90px"></div>`
            ];
            // 创建 infoWindow 实例	
            let infoWindow = new window.AMap.InfoWindow({
                content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
            });
            // 打开信息窗体
            let dd = this.map.getCenter()
            // dd.pos = [e.pos[0], e.pos[1]]
            dd.lat = item.latitude
            dd.lng = item.longitude
            infoWindow.open(this.map, dd);
        },
        // 点击获取经纬度
        latitude() {
            this.map.on('click', function (ev) {
                // console.log(ev)
                // 触发事件的对象
                let target = ev.target;
                // 触发事件的地理坐标，AMap.LngLat 类型
                let lnglat = ev.lnglat;
                // 触发事件的像素坐标，AMap.Pixel 类型
                let pixel = ev.pixel;
                // 触发事件类型
                let type = ev.type;
                console.log(target, lnglat, pixel, type)
            });
        }

    },
    mounted() {
        this.initMap()
        this.initTableData()
    },
    destroyed() {
        // 销毁地图
        this.map.destroy()
    },

}

</script>

<style scoped>
/* 隐藏高德logo  */
.amap-logo {
    display: none !important;
}

/* 隐藏高德版权  */
.amap-copyright {
    display: none !important;
}

.custom-content-marker {
    position: relative;
    width: 25px;
    height: 34px;
}

.custom-content-marker img {
    width: 100%;
    height: 100%;
}

.custom-content-marker .close-btn {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 15px;
    height: 15px;
    font-size: 12px;
    background: #ccc;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 15px;
    box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
}

.custom-content-marker .close-btn:hover {
    background: #666;
}

#container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-style: ridge;
    float: right;
}

.location-container {
    margin: 0 auto;
    margin-top: 1%;
    height: 100%;
    width: 95%;
    background-color: #fff;
}


.location-body {
    height: 90%;
    width: 100%;
    display: flex;
}

.location-body-title {
    display: block;
    /* margin: 20px auto; */
    font-size: x-large;
    width: 100%;
    height: 50px;
    line-height: 50px;

}

.location-body-left {
    width: 36%;
    height: 100%;
}

.location-body-left-header {
    width: 96%;
    height: 9%;
    float: left;
}

.location-body-left-footer {
    width: 100%;
    height: 90%;
}

.location-body-right {
    width: 64%;
    height: 100%;
}

.map-container {
    width: 96%;
    height: 96%;
    margin: 0 auto;
}




.location-left-footer-select {
    margin: 10px auto;
    margin-bottom: 0;
    width: 80%;
    height: 30%;
}

.location-body-left-table-container {
    width: 95%;
    height: 500px;
    overflow: auto;
}

.location-left-body-header-select-item {
    width: 99%;
}

.location-right-footer-form {
    height: 80%;
    margin: 10px auto;
    /* border-style: ridge; */
    border: 1px solid #dcdfe6;
}
</style>